import React, { CSSProperties } from 'react'
import {ArrowBackIosNew} from '@material-ui/icons'
interface IProps {
    isBack: boolean;
    text: string;
}
const CommonNavStyle: CSSProperties = {
    height: '9vh',
    position: 'fixed',
    left: 0,
    top: 0,
    right: 0,
    zIndex: 100,
    boxShadow: '-2px 0px 24px 0px rgb(0 0 0 / 10%)',
    display: 'flex',
    flexFlow: 'row nowrap',
    alignItems: 'center',
    backgroundColor: '#fff'
}
const BackBtn: CSSProperties = {
    position: 'absolute',
    left: '5vw'
}
const TextStyle: CSSProperties = {
    fontSize: '18px'
}
const CommonNav = (props: IProps) => {
    return (
        <div style={CommonNavStyle}>
            {/* 返回按钮 */}
            <div style={{
                position: 'relative',
                textAlign: 'center',
                width: '100vw'
            }}>
            {
                props.isBack ? (
                    <div style={BackBtn} onClick={
                        () => {
                            window.history.go(-1)
                        }
                    }>
                        <ArrowBackIosNew fontSize='medium' style={{display: 'block'}}/>
                    </div>
                ) : (<></>)
            }
            {/* 导航栏文本 */}
            <span style={TextStyle}>
                {props.text}
            </span>
            </div>
        </div>
    )
}

export default CommonNav